import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Breadcrumb, 
  Steps, 
  List, 
  Card, 
  Input, 
  Select, 
  Space, 
  Tag,
  Divider,
  Button,
  Row,
  Col,
  Rate
} from 'antd';
import { 
  HomeOutlined, 
  EnvironmentOutlined, 
  SearchOutlined,
  RightOutlined,
  ShoppingOutlined,
  StarOutlined,
  TagOutlined
} from '@ant-design/icons';
import '../styles/Cinemas.css';

const { Search } = Input;
const { Option } = Select;

const Cinemas = () => {
  const navigate = useNavigate();
  const [cinemas, setCinemas] = useState([]);
  const [filteredCinemas, setFilteredCinemas] = useState([]);
  const [searchText, setSearchText] = useState('');
  const [selectedArea, setSelectedArea] = useState('all');
  const [selectedFeature, setSelectedFeature] = useState('all');
  const [hotDeals, setHotDeals] = useState([]);

  // 模拟影院数据
  useEffect(() => {
    const mockCinemas = [
      {
        id: 1,
        name: '万达影城（宁工店）',
        address: '宁波市江北区风华路201号',
        area: '江北区',
        rating: 4.5,
        minPrice: 38,
        features: ['IMAX', '杜比全景声', '4D'],
        tags: ['可退票', '可改签'],
        distance: '1.2km',
        imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vZk5m1zxdUhEjd9LXc0EgAHaIb?cb=iwp2&rs=1&pid=ImgDetMain'
      },
      {
        id: 2,
        name: '博纳国际影城（宁工店）',
        address: '宁波市江北区风华路201号',
        area: '江北区',
        rating: 4.8,
        minPrice: 35,
        features: ['IMAX', '4D'],
        tags: ['可退票'],
        distance: '2.5km',
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.e604e7e9433d967ed25a434545d21bfe?rik=6jHziCxpPYPf5Q&riu=http%3a%2f%2fimg3.yun300.cn%2frepository%2fimage%2fNTxIyhgTT0mUVqEq0wnVoA.jpg_%7bi%7dxaf.jpg%3ftenantId%3d11061%26viewType%3d1&ehk=1McjkymIKeoqmUos%2fgFa5lmNXg7v1WVhSDOD296PxRI%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
      },
      {
        id: 3,
        name: 'CGV影城（宁工店）',
        address: '宁波市江北区风华路201号',
        area: '江北区',
        rating: 4.6,
        minPrice: 42,
        features: ['IMAX', '杜比全景声'],
        tags: ['可退票', '可改签'],
        distance: '3.1km',
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.6d1d2d98e426343be1ef2e51f5c02fb9?rik=gKTFvbqAY2iyxA&riu=http%3a%2f%2fe0.ifengimg.com%2f10%2f2019%2f0108%2fCFB0F615E096DAF6A0953B72AF1F15DB2D4DD03A_size282_w1600_h1200.jpeg&ehk=5ioEq2pmT9db8CVGXQG2DZxvLtN8abLLQJsrTmPnzNo%3d&risl=&pid=ImgRaw&r=0'
      }
    ];

    // 模拟热销团购券数据
    const mockHotDeals = [
      {
        id: 1,
        title: '万达影城观影券',
        subtitle: '万达影城通兑券',
        price: 29.9,
        originalPrice: 40,
        soldCount: 8920,
        tag: '新客特惠',
        validPeriod: '有效期至2024-12-31',
        description: '全天可用，节假日通用',
        cinemaName: '万达影城',
        restrictions: ['限量优惠', '不可退']
      },
      {
        id: 2,
        title: '博纳影城观影券',
        subtitle: '博纳影城专享券',
        price: 33.9,
        originalPrice: 45,
        soldCount: 5621,
        tag: '周末特惠',
        validPeriod: '有效期至2024-12-31',
        description: '周末节假日通用',
        cinemaName: '博纳国际影城',
        restrictions: ['限量发售', '不可退']
      },
      {
        id: 3,
        title: 'CGV影城观影券',
        subtitle: 'CGV影城专享券',
        price: 27.9,
        originalPrice: 38,
        soldCount: 3267,
        tag: '限时抢购',
        validPeriod: '有效期至2024-12-31',
        description: '全天可用，节假日通用',
        cinemaName: 'CGV影城',
        restrictions: ['数量有限', '不可退']
      }
    ];

    setCinemas(mockCinemas);
    setFilteredCinemas(mockCinemas);
    setHotDeals(mockHotDeals);
  }, []);

  // 处理搜索
  const handleSearch = (value) => {
    setSearchText(value);
    filterCinemas(value, selectedArea, selectedFeature);
  };

  // 处理区域筛选
  const handleAreaChange = (value) => {
    setSelectedArea(value);
    filterCinemas(searchText, value, selectedFeature);
  };

  // 处理特色筛选
  const handleFeatureChange = (value) => {
    setSelectedFeature(value);
    filterCinemas(searchText, selectedArea, value);
  };

  // 筛选影院
  const filterCinemas = (search, area, feature) => {
    let filtered = [...cinemas];

    // 按名称或地址搜索
    if (search) {
      filtered = filtered.filter(cinema => 
        cinema.name.toLowerCase().includes(search.toLowerCase()) ||
        cinema.address.toLowerCase().includes(search.toLowerCase())
      );
    }

    // 按区域筛选
    if (area && area !== 'all') {
      filtered = filtered.filter(cinema => cinema.area === area);
    }

    // 按特色筛选
    if (feature && feature !== 'all') {
      filtered = filtered.filter(cinema => cinema.features.includes(feature));
    }

    setFilteredCinemas(filtered);
  };

  // 跳转到影院详情页
  const handleCinemaClick = (cinemaId) => {
    navigate(`/cinema/${cinemaId}`);
  };

  return (
    <div className="cinemas-container">
      <Breadcrumb className="cinema-breadcrumb">
        <Breadcrumb.Item href="/">
          <HomeOutlined />
          <span>首页</span>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <EnvironmentOutlined />
          <span>影院</span>
        </Breadcrumb.Item>
      </Breadcrumb>

      <div className="cinema-filter">
        <Space size={24} className="filter-container">
          <div className="area-selector">
            <span className="label">选择区域：</span>
            <Select 
              value={selectedArea} 
              onChange={handleAreaChange}
              style={{ width: 120 }}
            >
              <Option value="all">全部区域</Option>
              <Option value="江北区">江北区</Option>
              <Option value="江北区">江北区</Option>
              <Option value="江北区">江北区</Option>
            </Select>
          </div>
          <Search
            placeholder="搜索影院名称或地址"
            allowClear
            enterButton
            style={{ width: 300 }}
            onChange={(e) => setSearchText(e.target.value)}
          />
        </Space>
      </div>

      <div className="cinema-content-wrapper">
        <div className="cinema-list">
          <List
            dataSource={filteredCinemas}
            renderItem={cinema => (
              <List.Item>
                <Card 
                  className="cinema-card"
                  hoverable
                  onClick={() => handleCinemaClick(cinema.id)}
                >
                  <div className="cinema-content">
                    <img 
                      alt={cinema.name} 
                      src={cinema.imageUrl}
                      className="cinema-image" 
                      style={{ width: '200px', height: '150px', objectFit: 'cover' }}
                    />
                    <div className="cinema-info">
                      <div className="cinema-header">
                        <h3 className="cinema-name">{cinema.name}</h3>
                        <div className="cinema-rating">
                          <Rate disabled defaultValue={cinema.rating} />
                          <span className="cinema-rating">{cinema.rating}分</span>
                        </div>
                      </div>
                      <p className="cinema-address">
                        <EnvironmentOutlined /> {cinema.address}
                        <span className="cinema-distance">{cinema.distance}</span>
                      </p>
                      <div className="cinema-features">
                        {cinema.features.map((feature, index) => (
                          <Tag key={index} color="blue">
                            <TagOutlined /> {feature}
                          </Tag>
                        ))}
                      </div>
                      <div className="cinema-tags">
                        {cinema.tags.map((tag, index) => (
                          <Tag key={index} color="green">{tag}</Tag>
                        ))}
                      </div>
                      <div className="cinema-price">
                        <span className="price-label">票价：</span>
                        <span className="price-value">¥{cinema.minPrice}</span>
                        <span className="price-text">起</span>
                      </div>
                    </div>
                    <div className="select-seat-button">
                      选座购票 <RightOutlined />
                    </div>
                  </div>
                </Card>
              </List.Item>
            )}
          />
        </div>

        <div className="hot-deals">
          <div className="hot-deals-header">
            <ShoppingOutlined />
            <span>热销团购券</span>
          </div>
          <List
            className="hot-deals-list"
            dataSource={hotDeals}
            renderItem={deal => (
              <List.Item>
                <Card className="deal-card" hoverable>
                  <div className="deal-content">
                    <Tag color="red" className="deal-tag">{deal.tag}</Tag>
                    <div className="deal-info">
                      <div className="deal-title">
                        <h4>{deal.title}</h4>
                        <div className="deal-subtitle">{deal.subtitle}</div>
                      </div>
                      <div className="deal-details">
                        <div className="deal-price-info">
                          <span className="current-price">¥{deal.price}</span>
                          <span className="original-price">¥{deal.originalPrice}</span>
                          <span className="save-price">省¥{(deal.originalPrice - deal.price).toFixed(1)}</span>
                        </div>
                        <div className="deal-meta">
                          <div className="deal-sold">已售 {deal.soldCount.toLocaleString()}</div>
                          <div className="deal-period">{deal.validPeriod}</div>
                        </div>
                        <div className="deal-description">{deal.description}</div>
                        <div className="deal-restrictions">
                          {deal.restrictions.map((restriction, index) => (
                            <Tag key={index} color="orange">{restriction}</Tag>
                          ))}
                        </div>
                      </div>
                    </div>
                    <Button type="primary" className="buy-button" icon={<ShoppingOutlined />}>
                      立即抢购
                    </Button>
                  </div>
                </Card>
              </List.Item>
            )}
          />
        </div>
      </div>
    </div>
  );
};

export default Cinemas; 